<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<title>test</title>
	<style>
		body {
			height: 2000px;
		}
		#test {
			position: fixed;
			left:0;
			right:0;
			bottom: 0;
			min-height: 60px;
			background: rgba(255,255,255,.3);
		}
		ul{
			list-style: none;
			margin: 0;
			padding: 0;
		}
		li {
			line-height: 1.5;
		}
	</style>
</head>
<body>
	<div id="test">
		<ul>
			<li class="scroll"></li>
			<li class="ua"></li>
			<li class="touch"></li>
		</ul>
	</div>
	<script type="text/javascript">
		$ = function(selector, context){
			return (context || document).querySelector(selector);
		}
		$$ = function(selector, context){
			return (context || document).querySelectorAll(selector);
		}
		id = function(id, context){
			return (context || document).getElementById(id)
		}
	</script>
	<script>
		var t = $('.touch');
		var text = t.textContent !== null ? 'textContent' : 'innerText';
		window.addEventListener('touchstart', function(){
			t[text] = "touch start"
		});
		window.addEventListener('touchmove', function(){
			t[text] = "touch move"
		});
		window.addEventListener('touchend', function(){
			t[text] = "touch end"
		});
		window.addEventListener('touchcancel', function(){
			t[text] = "touch cancel"
		});
		var h = screen.availHeight;
		var w = screen.availWidth;
		t[text] = 'width: ' + w + ' height: ' + h; 
		var ua = $('.ua');
		ua[text] = navigator.userAgent;
		window.addEventListener('scroll', function(){
			var scrollText = $('.scroll');
			var scrollTop = document.body.scrollTop;
			scrollText[text] = "scroll top: "  + scrollTop;
		});
	</script>
</body>
</html>

